<template>
  <view class="page">
    <view class="input" v-for="(item, index) in 5" :key="index">
      <view class="input-wrapper">
        <view class="input-label">基地名称</view>
        <input class="input-put" placeholder="榆阳基地" />
        <image
          style="opacity: 0"
          class="input-icon"
          :src="require('@/static/img/arrows-right.png')"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="textarea">
      <view class="textarea-wrapper">
        <view class="textarea-label">任务详情</view>
        <view class="textarea-box">
          <textarea class="textarea-put" placeholder="请输入" @input="" />
          <uUpload v-model="fileList1" width="131rpx" height="131rpx">
            <view class="plus-pic">
              <image
                class="plus-icon"
                :src="require('@/static/img/plus2-icon.png')"
              ></image>
            </view>
          </uUpload>
        </view>
      </view>
    </view>

    <view class="input">
      <view class="input-wrapper" @click="pickerShow = true">
        <view class="input-label">生长周期</view>
        <view class="input-put">{{ array[0][index] }}</view>
        <image
          class="input-icon"
          :src="require('@/static/img/arrows-right.png')"
          mode="scaleToFill"
        />
      </view>
    </view>

    <view class="input">
      <view class="input-wrapper" @click="dateShow = true">
        <view class="input-label">生长周期</view>
        <view class="input-put">{{ $dayjs(date).format("YYYY-MM-DD") }}</view>
        <image
          class="input-icon"
          :src="require('@/static/img/arrows-right.png')"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="btn-box">
      <button class="btn" @click="onSubmit">
        <text class="btn-text" style="color: #fff">提交</text>
      </button>
    </view>
    <!-- 选择器 -->
    <u-picker
      :show="pickerShow"
      :columns="array"
      @cancel="pickerShow = false"
      @confirm="bindPickerChange"
    ></u-picker>
    <!-- 日期选择器 -->
    <u-datetime-picker
      :show="dateShow"
      v-model="date"
      @cancel="dateShow = false"
      @confirm="bindDateChange"
      mode="date"
    ></u-datetime-picker>
  </view>
</template>

<script>
import uUpload from "@/components/upload.vue";

export default {
  data() {
    return {
      dateShow: false,
      pickerShow: false,
      fileList1: [],
      array: [["中国", "美国", "巴西", "日本"]],
      index: 0,
      date: Number(new Date()),
    };
  },
  components: {
    uUpload,
  },
  onLoad() {},
  methods: {
    bindDateChange: function (e) {
      this.dateShow = false;
    },
    bindPickerChange: function ({ indexs }) {
      console.log("picker发送选择改变，携带值为", indexs);
      this.index = indexs[0];
      this.pickerShow = false;
    },

    onSubmit() {
      console.log(this.fileList1);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 150rpx;
  background: #f6f6f6;
}
.input {
  background: #fff;
  padding: 0 53rpx;

  &-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #e9e9e9;
    padding: 33rpx 0;
  }
  &-label {
    font-weight: bold;
    font-size: 26rpx;
    color: #202020;
  }
  &-put {
    flex: 1;
    font-size: 26rpx;
    text-align: right;
  }
  &-icon {
    width: 21rpx;
    height: 21rpx;
    margin-left: 5rpx;
  }
}
.textarea {
  background: #fff;
  padding: 0 53rpx;
  width: 100%;
  &-wrapper {
    padding: 33rpx 0;
  }
  &-label {
    width: 100%;
    font-weight: bold;
    font-size: 26rpx;
    color: #202020;
    margin-bottom: 25rpx;
  }
  &-box {
    width: 100%;
    min-height: 379rpx;
    background: #f6f6f6;
    border-radius: 10rpx;
    padding: 35rpx;
    box-sizing: border-box;
  }
  &-put {
    width: 100%;
    font-size: 26rpx;
  }
}
.plus-pic {
  background: #fff;
  width: 131rpx;
  height: 131rpx;
  border-radius: 18rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.plus-icon {
  width: 50rpx;
  height: 50rpx;
}
// .update-pics {
//   width: 100%;
//   display: flex;
//   flex-wrap: wrap;
//   .plus-pic {
//     background: #fff;
//     width: 131rpx;
//     height: 131rpx;
//     border-radius: 18rpx;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//   }
//   .plus-icon {
//     width: 50rpx;
//     height: 50rpx;
//   }
//   .pic {
//     width: 131rpx;
//     height: 131rpx;
//     border-radius: 18rpx;
//     margin-right: 15rpx;
//     margin-bottom: 15rpx;
//   }
// }
.my-info-panel {
  position: relative;
  width: 690rpx;
  height: 175rpx;
  background: #1ac678;
  opacity: 1;
  margin: 20rpx auto;
  border-radius: 20rpx;
}
.info-panel-pic {
  position: absolute;
  width: 138rpx;
  bottom: 10rpx;
  right: 10rpx;
}
.userinfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 32rpx 42rpx;
  margin-bottom: 70rpx;
  &-pic {
    width: 114rpx;
    height: 114rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 70rpx;
    margin-right: 46rpx;
  }
  &-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
  &-account {
    font-size: 21rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
.btn-box {
  position: fixed;
  left: 0;
  bottom: 33rpx;
  width: 100%;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
